/*注释注释*/
#body div.header{
    margin-bottom: 0px;
}

#body img{
    width: 100%;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.id-p-inner{
    overflow: hidden;
    /* width: 80%; */
    margin: 5% auto;
}

.id-p-item{
    width: 25.3%;
    text-align: center;
    float: left;
    margin: 4% 4%;
}


/*推荐的商品*/
.id-hot1-text{
    padding:75px 27px;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}


/*首页6个推荐的产品*/
.id-p-item img{
    /*width: 193px;*/
}

.p-item-name{
    font-family:"MicrosoftYaHei";
    font-weight:bold;
    font-size: 24px;
    margin-top: 20px;
}

.p-item-intr{
    font-family:"MicrosoftYaHei";
    font-size:16px;
}

.p-item-fun{
    font-family:'MicrosoftYaHei';
    font-size:12px;
    color: #9B9B9B;
    margin-top:25px;
}



#body div.id-hot {
    position: relative;
    /*overflow: hidden;*/
    clear: both;
    width: 80%;
    margin: 0 auto;
    margin-top: 200px;
}

#body > div:nth-child(5) {
    width: 64%;
    margin: 0 auto;
    margin-top: 100px;
}

.id-hot1-text {
    background: #F9F9F9;
}

.id-hot img {
    width: 100%;
}


#index-au2{
    -webkit-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms
}

.id-hot1-bg {
    width: 73%;
    float: left;
}

.id-hot1-right {
    width: 35%;
    float: right;
    position: absolute;
    right: 0px;
    top:-120px;
    z-index: 2;
}

.id-hot1-p1 {
    width: 100%;
}

.id-hot1-p1{
    position: relative;
    top:-40px;
}

.id-hot1-p1 img {
    width: 100%;
}




.hot1-title{
    font-family:"Century Gothic";
    font-size:33px;
    margin-bottom: 70px;
}

.hot1-page{
    font-size: 16px;
    font-family:"Century Gothic";
    line-height: 2.5;
}

.id-lm{
    font-family:"Eras Light ITC";
    font-size:16px;
    padding: 25px 20px;
    color: white;
    background: #545454;
    width: 60%;
    margin-top: 20px;
    line-height: 1;
    font-style: italic;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

img#hot1-p1-sersor{
    display: block;
    width: 56%;
    /*margin: 0 auto;*/
    -webkit-transform: rotateZ(-0deg);
    -ms-transform: rotate(-0deg);
    transform: rotateZ(-0deg);
    -webkit-transition:all 2000ms;
    -o-transition:all 2000ms;
    transition:all 2000ms;
}

#hot1-p1-sersor.product-active{
    -webkit-transform: rotateZ(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotateZ(-50deg);
    -webkit-transition:all 2000ms;
    -o-transition:all 2000ms;
    transition:all 2000ms;
}




#body img.id-hot2-left {
    width: 53%;
}

.id-hot2-right {
    width: 49%;
}

.id-hot2-right {
    position: absolute;
    top: 35px;
    right: 71px;
}

.id-hot2-right .id-lm {
    width: 20%;
}

.id-hot2-right .id-lm{
    width: 35%;
    margin-left:69px;
    position: relative;
    top:31px;
    z-index: 1000;
}

#body img#hot2-p-bg{
    width: 125%;
}


#body img#index-hot2-p{
    width: 70%;
    position: relative;
    top: -50px;
    left: 50px;
    -webkit-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms
}


.id-au{
    overflow: hidden;
    position: relative;
}

.id-au-left{
    width: 62.7%;
    position: relative;
}

.id-au-left img{
    width:100%;
}

.id-au-3w{
    width: 56%;
    position: relative;
    top:-100px;
    right:-30%;
    background-color:#E6F0F4;
    text-align: center;
}

.id-au-right{
    width: 20%;
    position: absolute;
    right: 0;
    top: 30%;
}

#body div.id-hot-au{
    margin-top: 300px;
}
.id-au-3w{
    padding: 30px;
    -webkit-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms;
}

.id-au-3w p{
    font-family:"Eras Light ITC";
    line-height:1.5;
    font-size:43px;
}

.id-au-3w .id-lm{
    padding: 25px 20px;
    width: inherit;
    margin-left: 150px;
    width:60%;
    text-align:left;
    /* text-indent: 2em; */
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#body .id-lm img{
    display:inline-block;
    /*  marign-left:100px; */
    width: 37px;
    float: right;
    vertical-align: baseline;
    margin-top: 3px;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}


.id-au-right p{
    margin-top: 36px;
    line-height:2;
    font-family:"Century Gothic";
    font-size:17px;
}


.id-ad-inner{
    width: 58%;
    margin: 0 auto;
}

.id-ad-inner *{
    color: white;
}

.id-ad-inner .id-lm{
    color: #155759;
}

.id-ad-inner div:nth-child(1) p{
    font-size: 40px;
    font-family:"Century Gothic";
    line-height:2;
}

.id-ad-inner div:nth-child(2) p{
    font-size: 20px;
    font-family:"Century Gothic";
    line-height: 2;
}

.id-ad-inner .id-lm-s{
    width: 157px;
    padding: 10px 21px;
    border-radius: 56px;
    background: rgb(49,191,180);
    font-weight:bold;
    color:#155759;
    font-size: 20px;
    margin-top: 25px;
    position:relative;
    z-index:1000;
    overflow:hidden;
}

.id-lm-s:hover:after{
    left:0px;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}

.id-lm-s:after{
    content:'LEARN MORE';
    padding: 10px 21px;
    width:100%;
    height:100%;
    position:absolute;
    background:#155759;
    /*   border-radius:55px; */
    top:0px;
    left:-200px;
    right:0px;
    bottom:0px;
    color:rgb(49,191,180);
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}


.id-ad{
    padding: 50px 0;
    height: 509px;
}


.id-servic{
    padding: 150px  91px;
}

[class*='id-ser-wapper']{
    height: 308px;
    position:relative;
    -webkit-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms;

}


[class*='id-ser-wapper']:hover{
    -webkit-box-shadow: 0px 0px 20px #3f3f3f;
    box-shadow: 0px 0px 20px #3f3f3f;
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
}

[class*='id-ser-wapper']:before{
    background:white;
    -webkit-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms;
}


[class*='id-ser-wapper']:hover:before{

    background:rgba(0,0,0,0.5);

    font-size:25px;

    font-family:'MicrosolfYahei';

    color:white;

    vertical-align:middle;

    padding: 100px 30px 0;

    -webkit-transition:all .5 s;

    -o-transition:all .5 s;

    transition:all .5 s;
}

.id-ser-wapper-1:before{
    content:'What Can We Provide——';

}
.id-ser-wapper-2:before{
    content:'What Is SENSSUN Cloud？';

}
.id-ser-wapper-3:before{
    content:'Hardware Data Support——';

}
.id-ser-wapper-4:before{
    content:'What Services Table Do We Have?';

}

.id-ser-wapper-4:before,.id-ser-wapper-3:before,.id-ser-wapper-2:before,.id-ser-wapper-1:before{
    font-size:25px;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    color:transparent;
    background:transparent;
}



.id-servic *{
    text-align: center;
}

.id-servic-content {
    /* overflow: hidden; */
}

.id-servic-item {
    width: 22%;
    float: left;
    margin: 0 1.5%;
}





#body img[class^='id-ser']{
    display:block;
    margin:0 auto;
    width: 80%;
}




.id-servic-title{
    font-size:43px;
    font-family:"Eras Light ITC";
    font-style: italic;
    color: #545454;
    margin-bottom: 30px;
}

.id-servic-sum{
    color: #898989;
    font-family:"Eras Light ITC";
    font-size:16px;
    margin-bottom: 90px;
}

.id-servic-item div:nth-child(2){
    font-family:"Arial Rounded MT Bold";
}


.transition{
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0);
    -webkit-transition:-webkit-transform  300ms linear 0ms;
    transition:-webkit-transform  300ms linear 0ms;
    -o-transition:transform  300ms linear 0ms;
    transition:transform  300ms linear 0ms;
    transition:transform  300ms linear 0ms, -webkit-transform  300ms linear 0ms;
}

.transition-up{
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    -webkit-transition:-webkit-transform 300ms linear 0ms;
    transition:-webkit-transform 300ms linear 0ms;
    -o-transition:transform 300ms linear 0ms;
    transition:transform 300ms linear 0ms;
    transition:transform 300ms linear 0ms, -webkit-transform 300ms linear 0ms;
}

@media screen and (max-width:1380px) {
    #body > div:nth-child(5) {
        width: 74%;
    }
}